<template>
    <ul class="blockNameClass">
        <li v-for="(item, index) in listData" :key="index">
            <div class="fl">
                <p class="colorBlock" :style="{ background: item.color }"></p>
                <p class="blockName">{{ item.name }}</p>
            </div>
            <div class="fr">
                <span class="blockName">{{ item.val + item.unit }}</span>
                <span class="rate" :style="{ color: item.color }">{{ item.rate }}%</span>
            </div>
        </li>
    </ul>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
    list: Array<{
        /** 色值 */
        color: string;
        /** 名称 */
        name: string;
        /** 值 */
        val: number | string;
        /** 单位 */
        unit: string;
        /** 占比 */
        rate: string;
    }>;
}
const props = withDefaults(defineProps<Props>(), {
    list: () => [{ color: '1', name: '2', val: '3', unit: '4', rate: '2' }]
});
const listData = computed(() => props.list);
</script>

<style scoped lang="scss">
.blockNameClass {
    width: 100%;
    li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
        &:last-of-type {
            margin-bottom: 0;
        }
        .blockName {
            color: #fff;
            font-size: 12px;
        }
        .fl {
            width: 52%;
            display: flex;
            align-items: center;
            .colorBlock {
                width: 10px;
                height: 10px;
                display: inline-block;
                margin-right: 8px;
            }
        }
        .fr {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex: 1;
            .rate {
                color: #27b0f2;
                font-size: 14px;
                margin-left: 16px;
                @include pmzd();
            }
        }
    }
}
</style>
